<template>
  <div class="chat-details-panel" :class="{ 'chat-details-panel-full': fullWidth }">
    <div class="details-panel-content">
      <!-- 详情面板头部 -->
      <div class="details-panel-header">
        <q-btn 
          icon="close" 
          flat 
          round 
          dense 
          class="details-close-btn"
          @click="$emit('close')" 
        />
      </div>

      <!-- 好友详情 -->
      <div v-if="type === 'User'" class="details-panel-body">
        <!-- 头像和名称 -->
        <div class="details-user-header-section">
          <div class="details-user-avatar-item">
            <q-avatar 
              class="details-user-avatar-large" 
              size="52px"
              :style="getAvatarStyle(targetId || '')"
            >
              {{ getUserInitial(targetId || '') }}
            </q-avatar>
            <div class="details-user-name-large">{{ targetName }}</div>
          </div>
          <div class="details-add-contact-btn" @click="$emit('add-contact')">
            <div class="details-add-icon-wrapper">
              <q-icon name="add" size="20px" />
            </div>
            <div class="details-add-text">添加</div>
          </div>
        </div>

        <q-separator class="details-separator" />

        <!-- 设置项容器 -->
        <div class="details-settings-container">
          <!-- 查找聊天记录 -->
          <div class="details-item clickable" @click="$emit('search-chat-history')">
            <div class="details-item-label">查找聊天记录</div>
            <q-icon name="chevron_right" size="20px" class="details-chevron-icon" />
          </div>

          <q-separator class="details-separator" />

          <!-- 消息免打扰 -->
          <div class="details-item">
            <div class="details-item-label">消息免打扰</div>
            <q-toggle :model-value="doNotDisturb" @update:model-value="$emit('update:doNotDisturb', $event)" />
          </div>

          <!-- 置顶聊天 -->
          <div class="details-item">
            <div class="details-item-label">置顶聊天</div>
            <q-toggle :model-value="pinChat" @update:model-value="$emit('update:pinChat', $event)" />
          </div>
        </div>

        <q-separator class="details-separator details-separator-spacing" />

        <!-- 清空聊天记录 -->
        <div class="details-item details-item-danger clickable" @click="$emit('clear-chat-history')">
          <div class="details-item-label">清空聊天记录</div>
        </div>
      </div>

      <!-- 群组详情 -->
      <div v-else-if="type === 'Group'" class="details-panel-body">
        <!-- 搜索群成员 -->
        <q-input
          :model-value="groupMemberSearch"
          @update:model-value="$emit('update:groupMemberSearch', $event)"
          placeholder="搜索群成员"
          outlined
          dense
          class="details-member-search-input"
          autocomplete="off"
          clearable
        >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>

        <!-- 群成员网格 -->
        <div class="details-members-grid">
          <div
            v-for="member in filteredMembers"
            :key="member.member_id"
            class="details-member-grid-item"
          >
            <q-avatar class="details-member-avatar-grid" size="50px">
              <div 
                class="details-avatar-placeholder"
                :style="getAvatarStyle((member as any).displayName || member.alias || member.member_id)"
              >
                {{ ((member as any).displayName?.[0] || member.alias?.[0] || member.member_id[0] || 'M').toUpperCase() }}
              </div>
            </q-avatar>
            <div class="details-member-name-grid">{{ (member as any).displayName || member.alias || member.member_id }}</div>
          </div>
          <!-- 添加成员按钮 -->
          <div class="details-member-grid-item details-add-member-item" @click="$emit('add-group-member')">
            <div class="details-add-member-icon-wrapper">
              <q-icon name="add" size="24px" />
            </div>
            <div class="details-member-name-grid">添加</div>
          </div>
        </div>

        <!-- 展开更多 -->
        <div v-if="groupMembers.length > 16" class="details-expand-more-btn" @click="$emit('toggle-show-all-members')">
          <span>{{ showAllMembers ? '收起' : '展开更多' }}</span>
          <q-icon :name="showAllMembers ? 'expand_less' : 'expand_more'" size="20px" />
        </div>

        <q-separator class="details-separator details-separator-spacing" />

        <!-- 设置项容器 -->
        <div class="details-settings-container">
          <!-- 群聊名称 -->
          <div class="details-item">
            <div class="details-item-label">群聊名称</div>
            <div class="details-item-value">{{ groupDetails?.group_name || targetName }}</div>
          </div>

          <!-- 群公告 -->
          <div class="details-item clickable" @click="$emit('view-group-announcement')">
            <div class="details-item-label">群公告</div>
            <div class="details-item-value">{{ groupDetails?.announcement || '暂无公告' }}</div>
            <q-icon name="chevron_right" size="20px" class="details-chevron-icon" />
          </div>

          <!-- 备注 -->
          <div class="details-item">
            <div class="details-item-label">备注</div>
            <div class="details-item-value">群聊的备注仅自己可见</div>
          </div>

          <!-- 查找聊天记录 -->
          <div class="details-item clickable" @click="$emit('search-chat-history')">
            <div class="details-item-label">查找聊天记录</div>
            <q-icon name="chevron_right" size="20px" class="details-chevron-icon" />
          </div>
        </div>

        <q-separator class="details-separator details-separator-spacing" />

        <!-- 危险操作区域 -->
        <div class="details-danger-actions-container">
          <!-- 群主显示解散群组，普通成员显示退出群聊 -->
          <div v-if="isGroupOwner" class="details-item details-item-danger" @click="$emit('dissolve-group')">
            <div class="details-item-label">解散群组</div>
          </div>
          <div v-else class="details-item details-item-danger" @click="$emit('leave-group')">
            <div class="details-item-label">退出群聊</div>
          </div>
          <div class="details-danger-action-divider"></div>
          <!-- 清空聊天记录 -->
          <div class="details-item details-item-danger" @click="$emit('clear-chat-history')">
            <div class="details-item-label">清空聊天记录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getAvatarStyle } from '@/utils/avatar'

const props = defineProps<{
  type: 'User' | 'Group' | null
  targetId: string | null
  targetName: string
  fullWidth?: boolean
  doNotDisturb: boolean
  pinChat: boolean
  groupMemberSearch: string
  groupMembers: any[]
  groupDetails: any
  showAllMembers: boolean
  isGroupOwner: boolean
  getUserInitial: (userId: string | null) => string
}>()

defineEmits<{
  close: []
  'add-contact': []
  'search-chat-history': []
  'update:doNotDisturb': [value: boolean]
  'update:pinChat': [value: boolean]
  'update:groupMemberSearch': [value: string]
  'add-group-member': []
  'toggle-show-all-members': []
  'view-group-announcement': []
  'dissolve-group': []
  'leave-group': []
  'clear-chat-history': []
}>()

// 过滤群成员
const filteredMembers = computed(() => {
  let members = props.groupMembers
  if (!props.showAllMembers && members.length > 16) {
    members = members.slice(0, 16)
  }
  
  if (props.groupMemberSearch) {
    const query = props.groupMemberSearch.toLowerCase()
    members = members.filter(
      (m) =>
        m.member_id.toLowerCase().includes(query) ||
        (m.alias && m.alias.toLowerCase().includes(query)) ||
        ((m as any).displayName && (m as any).displayName.toLowerCase().includes(query))
    )
  }
  
  return members
})
</script>

<style lang="sass" scoped>
// 详情面板样式（类似微信，固定宽度）
.chat-details-panel
  display: flex
  flex-direction: column
  background: #F7F7F7
  height: 100%
  overflow: hidden
  width: 280px
  min-width: 280px
  max-width: 280px
  border-left: 1px solid rgba(0, 0, 0, 0.08)
  
  // 占满整个右侧的情况
  &.chat-details-panel-full
    width: 100%
    max-width: 100%
    border-left: none

.details-panel-content
  flex: 1
  display: flex
  flex-direction: column
  height: 100%
  overflow-y: auto
  overflow-x: hidden

.details-panel-header
  display: flex
  align-items: center
  justify-content: flex-end
  padding: 10px 16px
  background: #FFFFFF
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
  flex-shrink: 0
    
  .details-close-btn
    color: #8E8E93
    padding: 4px
    
    &:hover
      background: rgba(0, 0, 0, 0.05)

.details-panel-body
  flex: 1
  overflow-y: auto
  overflow-x: hidden
  padding: 0
  background: #F7F7F7
  
  &::-webkit-scrollbar
    width: 4px
    
  &::-webkit-scrollbar-track
    background: transparent
    
  &::-webkit-scrollbar-thumb
    background: rgba(0, 0, 0, 0.1)
    border-radius: 2px
    
    &:hover
      background: rgba(0, 0, 0, 0.15)

// 好友详情样式
.details-user-header-section
  display: flex
  flex-direction: row
  align-items: flex-start
  justify-content: center
  padding: 20px 16px 16px 16px
  gap: 20px
  background: #FFFFFF
  border-radius: 0
  margin-bottom: 0
  
  .details-user-avatar-item
    display: flex
    flex-direction: column
    align-items: center
    gap: 8px
    flex: 0 0 auto
    
  .details-user-avatar-large
    color: white
    font-weight: 600
    font-size: 22px
    border-radius: 6px
    overflow: hidden
    
  .details-user-name-large
    font-size: 14px
    font-weight: 400
    color: #191919
    letter-spacing: -0.1px
    text-align: center
    width: 52px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    
  .details-add-contact-btn
    display: flex
    flex-direction: column
    align-items: center
    gap: 8px
    cursor: pointer
    padding: 0
    transition: opacity 0.2s ease
    flex: 0 0 auto
    
    &:hover
      opacity: 0.7
      
    .details-add-icon-wrapper
      width: 52px
      height: 52px
      border: 2px dashed #D1D1D6
      border-radius: 6px
      display: flex
      align-items: center
      justify-content: center
      color: #8E8E93
      background: #FAFAFA
      transition: all 0.2s ease
      
      &:hover
        border-color: #007AFF
        color: #007AFF
        background: #F0F7FF
        
    .details-add-text
      font-size: 12px
      color: #8E8E93
      font-weight: 400

.details-separator
  margin: 0
  background: rgba(0, 0, 0, 0.08)
  height: 0.5px
  
  &.details-separator-spacing
    height: 6px
    border: none
    background: transparent
    margin: 0

.details-settings-container
  background: #FFFFFF
  margin: 0
  
.details-item
  display: flex
  align-items: center
  justify-content: space-between
  padding: 13px 16px
  background: #FFFFFF
  transition: background-color 0.2s ease
  margin: 0
  
  &.clickable
    cursor: pointer
    
    &:hover
      background: rgba(0, 0, 0, 0.02)
      
    &:active
      background: rgba(0, 0, 0, 0.04)
      
  &.details-item-danger
    cursor: pointer
    
    .details-item-label
      color: #FF3B30
      font-weight: 500
      
    &:hover
      background: rgba(255, 59, 48, 0.05)
      
    &:active
      background: rgba(255, 59, 48, 0.08)
      
  .details-item-label
    font-size: 15px
    font-weight: 400
    color: #191919
    letter-spacing: -0.1px
    
  .details-item-value
    font-size: 14px
    color: #8E8E93
    text-align: right
    flex: 1
    margin-right: 8px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    
  .details-chevron-icon
    color: #C7C7CC
    flex-shrink: 0

// 群组详情样式
.details-member-search-input
  margin: 16px
  background: #FFFFFF
  border-radius: 6px
  
.details-members-grid
  display: grid
  grid-template-columns: repeat(4, 1fr)
  gap: 12px
  margin: 0 16px 12px 16px
  padding: 16px
  background: #FFFFFF
  border-radius: 0
  
  .details-member-grid-item
    display: flex
    flex-direction: column
    align-items: center
    gap: 8px
    cursor: pointer
    transition: opacity 0.2s ease
    
    &:hover
      opacity: 0.7
      
    .details-member-avatar-grid
      color: white
      font-weight: 600
      
    .details-member-name-grid
      font-size: 12px
      color: #191919
      text-align: center
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      width: 100%
      
    &.details-add-member-item
      .details-add-member-icon-wrapper
        width: 50px
        height: 50px
        border: 2px dashed #C7C7CC
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        color: #8E8E93
        transition: all 0.2s ease
        
        &:hover
          border-color: #007AFF
          color: #007AFF

.details-avatar-placeholder
  width: 100%
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  color: white
  font-weight: 500
  font-size: 18px
  border: 1px solid #E5E5E5

.details-expand-more-btn
  display: flex
  align-items: center
  justify-content: center
  gap: 6px
  padding: 10px
  color: #007AFF
  font-size: 13px
  cursor: pointer
  margin: 0 16px 12px 16px
  transition: opacity 0.2s ease
  
  &:hover
    opacity: 0.7

// 危险操作容器（参考微信设计）
.details-danger-actions-container
  background: #FFFFFF
  border-radius: 8px
  margin: 8px 16px
  overflow: hidden
  border: none
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08)
  
  .details-item
    margin: 0
    padding: 14px 16px
    border-bottom: none
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    position: relative
    
    &.details-item-danger
      .details-item-label
        color: #FF3B30
        font-weight: 500
        font-size: 16px
        text-align: center
        width: 100%
        letter-spacing: 0.1px
    
    &:hover
      background: rgba(255, 59, 48, 0.05)
    
    &:active
      background: rgba(255, 59, 48, 0.08)
      transition: background-color 0.1s ease
  
  .details-danger-action-divider
    height: 0.5px
    background: rgba(0, 0, 0, 0.1)
    margin: 0 16px
</style>

